<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="speechbubbles.css" />

<link rel="stylesheet" href="default.css">


<script src="speechbubbles.js">

/***********************************************
* Speech Bubbles Tooltip- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script type="text/javascript">

jQuery(function($){ //on document.ready
 	//Apply tooltip to links with class="addspeech", plus look inside 'speechdata.txt' for the tooltip markups
	$('a.addspeech').speechbubble({url:'speechdata.txt'})
})

</script>
<style type="text/css">
.content{
	width: 350px;
}
</style>
</head>
<body>


<p><a href="http://tools.dynamicdrive.com/imageoptimizer/" class="addspeech" rel="#speechbubble1">Image 
Optimizer</a> lets you easily optimize regular gifs, animated gifs, jpgs, and pngs, so they load as fast as possible. A fan of ribbons? Create alternating colored horizontal rules quickly using the <a href="http://tools.dynamicdrive.com/ribbon/" class="addspeech" rel="#speechbubble2">Ribbon Rules Generator</a>. Or, generate a gradient image using <a href="http://tools.dynamicdrive.com/gradient/" class="addspeech" rel="#speechbubble3">Gradient Image Maker</a>. And last but not least, if your site is missing a favourite icon- a 16x16 icon of your site shown in the user's location bar- generate one now using <a href="http://tools.dynamicdrive.com/favicon/" class="addspeech" rel="#speechbubble4">FavIcon Generator</a>.</p>

<p>While all of the above tooltips have their contents defined inside a <a href="speechdata.txt">single external file</a>, the following simply use the <b>title attribute</b> of their respective links to make up the tooltip: Visit
<a href="http://www.javascriptkit.com/" class="addspeech" title="Comprehensive JavaScript tutorials and over 400+ free scripts!">JavaScript Kit</a> for JavaScript tutorials! <a target="_partner" href="http://www.cssdrive.com/" class="addspeech" title="Categorized CSS gallery and examples!">CSS Drive</a> showcases some of the most attractive, CSS driven sites on the net.</p>







		<div class="content">

			<h2>The basic bubble variants</h2>

			<p class="triangle-isosceles">This only needs one HTML element.</p>

			<p class="triangle-isosceles top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>

			<p class="triangle-isosceles left">But it could be any element you want.</p>

			<p class="triangle-isosceles right">The entire appearance is created only with CSS.</p>

			<p class="triangle-right">This only needs one HTML element.</p>

			<p class="triangle-right top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>

			<p class="triangle-right left">But it could be any element you want.</p>

			<p class="triangle-right right">The entire appearance is created only with CSS.</p>

			<p class="triangle-obtuse">This only needs one HTML element.</p>

			<p class="triangle-obtuse top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>

			<p class="triangle-obtuse left">But it could be any element you want.</p>

			<p class="triangle-obtuse right">The entire appearance is created only with CSS.</p>

			<p class="triangle-border">This only needs one HTML element.</p>

			<p class="triangle-border top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>

			<p class="triangle-border left">But it could be any element you want.</p>

			<p class="triangle-border right">The entire appearance is created only with CSS.</p>
			
						

			<h2>Simple examples</h2>

			

			<h3 class="example-commentheading">125 comments</h3>

			

			<blockquote class="example-right">

				<p>Design is directed toward human beings. To design is to solve human problems by identifying them and executing the best solution.</p>

			</blockquote>

			<p>Ivan Chermayeff</p>

			

			<blockquote class="example-obtuse">

				<p>It&#8217;s not what you look at that matters, it&#8217;s what you see.</p>

			</blockquote>

			<p>Henry David Thoreau</p>

			

			<blockquote class="example-twitter" cite="http://twitter.com/necolas/status/9880187933">

				<p>Takes me longer to write up blog posts on experiments or projects than to create them in the first place.</p>

			</blockquote>

			<p><a href="http://twitter.com/necolas">@necolas</a> at <a href="http://twitter.com/necolas/status/9880187933">4:05 PM March 2nd 2010</a></p>



			<div class="example-number">57</div>





			<h2>More complex CSS3 examples</h2>

			<p>Some more experimental speech bubbles that try to limit the damage in browsers lacking the necessary CSS3 support.</p>



			<div class="pinched">

				<p><strong>It doesn&#8217;t matter what the first child element of this div is</strong>...but it does need a child element.</p>

			</div>



			<blockquote class="oval-speech">

				<p>This is a blockquote that is styled to look like a speech bubble</p>

			</blockquote>

			

			<blockquote class="oval-thought">

				<p>This is a blockquote that is styled to look like a thought bubble</p>

			</blockquote>

			

			<blockquote class="oval-quotes">

				<p>No, Donny, these men are nihilists, there&#8217;s nothing to be afraid of.</p>

			</blockquote>

			<p>Walter Sobchak</p>

			

			<blockquote class="rectangle-speech-border">

				<p>This is a blockquote that is styled to look like a speech bubble</p>

			</blockquote>



			<blockquote class="oval-speech-border">

				<p>This is a blockquote that is styled to look like a speech bubble</p>

			</blockquote>

			

			<blockquote class="oval-thought-border">

				<p>This is a blockquote that is styled to look like a thought bubble</p>

			</blockquote>
			
	</div>
</body>
</html>